<template>
  <div>
    
    <!-- 面包屑 -->
    <el-bread-crumb secondtitle="商品管理" thirdtitle="商品分类"></el-bread-crumb>

    <!-- 卡片 -->
    <el-card-comon>
      <template>
        
        <!-- 按钮 -->
        <el-button-com text="添加分类" class="goodSortBtn" 
            @click.native="openGoodSortDialog"></el-button-com>

        <!-- table-tree插件封装组件 -->
        <goods-table :goodsSortInfo="goodsSortInfo"></goods-table>
        
        <!-- 分页组件 -->
        <el-pagination-com 
          :nowPage.sync="pagenum" 
          :total.sync="total" 
          :pageNumber.sync="pagesize" 
          changeSizeName="changeSizeName" 
          changeSizeNumberName="changeSizeNumberName"/>

        <!-- dialog组件 -->
        <good-sort-dialog></good-sort-dialog>
        <editor-good-sort-dialog></editor-good-sort-dialog>

      </template>
    </el-card-comon>
  </div>
</template>

<script>
// 组件
import ElBreadCrumb from '@/components/common/ElBreadCrumb';
import ElCardComon from '@/components/common/ElCardComon';
import GoodsTable from '@/views/Main/goods_manage/goodsSort/GoodsTable';
import ElButtonCom from '@/components/common/ElButtonCom';
import ElPaginationCom from '@/components/common/ElPaginationCom';
import GoodSortDialog from '@/views/Main/goods_manage/goodsSort/GoodSortDialog';
import EditorGoodSortDialog from '@/views/Main/goods_manage/goodsSort/EditorGoodSortDialog';

// 方法
import { getGoodsSortData, getAllSortData } from '@/network/goodSortRequest';

export default {
  data() {
    return {
      goodsSortInfo: [], // 所有商品分类信息
      type: 3, // 默认3或者空都是获取1/2/3级全部列表
      pagenum: 1, // 当前页码
      pagesize: 5, // 每页显示多少条数据
      total: 0, // 总共数据
    }
  },
  created () {
    this.getAllGoodsInfo(); 
    this.$bus.$on('getAllGoodsInfo', this.getAllGoodsInfo);
    this.$bus.$on('changeSizeName', this.changeSize);
    this.$bus.$on('changeSizeNumberName', this.changeSizeNumber);
  },
  destroyed() {
    this.$bus.$off('getAllGoodsInfo');
    this.$bus.$off('changeSizeName');
    this.$bus.$off('changeSizeNumberName');
  },
  methods: {
    async getAllGoodsInfo () { // 获取所有商品分类信息
      const requestObj = {
        'type': this.type,
        'pagenum': this.pagenum,
        'pagesize': this.pagesize
      }
      const {data, meta} = await getGoodsSortData(requestObj);
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      // console.log(data);
      this.total = data.total;
      return this.goodsSortInfo = data.result;
    },
    changeSize() { // 页面改变
      this.getAllGoodsInfo();
    },
    changeSizeNumber() { // 页面显示的数据改变
      this.getAllGoodsInfo();
    },
    async openGoodSortDialog() { // 打开dialog组件获取父级分类列表
      
      const {meta, data} = await getAllSortData();
      // console.log(meta, data);
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }

      return this.$bus.$emit('openGoodSortDialog', data);
      
    }
  },
  components: {
    ElBreadCrumb,
    ElCardComon,
    GoodsTable,
    ElButtonCom,
    ElPaginationCom,
    GoodSortDialog,
    EditorGoodSortDialog
  }
}
</script>

<style lang="scss" scoped>
  .goodSortBtn {
    margin-bottom: 15px;
  }
</style>